<template>
  <div class="mobile-temporary-follow-dialog" v-if="visible">
    <div class="dialog-overlay" @click="handleClose"></div>
    <div class="dialog-content">
      <div class="dialog-header">
        <div class="dialog-title">选择跟班学生</div>
        <div class="close-btn" @click="handleClose">×</div>
      </div>
      <div class="dialog-body">
        <!-- 搜索区域 -->
        <div class="search-section">
          <van-search
            v-model="searchKeyword"
            placeholder="请输入学生姓名搜索"
            shape="round"
            @search="handleSearch"
            @clear="handleClearSearch"
          />
        </div>

        <!-- 学生列表 -->
        <div class="student-list">
          <van-checkbox-group v-model="selectedStudents" ref="checkboxGroup">
            <div
              class="student-item"
              v-for="student in filteredStudents"
              :key="student.id"
            >
              <van-checkbox :name="student.id" shape="square">
                <div class="student-info">
                  <div class="student-name">{{ student.studentName }}</div>
                  <div class="student-details">
                    <span class="student-age">{{ student.studentAge }}岁</span>
                    <span class="student-classes">剩余{{ student.classSurplusTime }}课时</span>
                  </div>
                </div>
              </van-checkbox>
            </div>
          </van-checkbox-group>

          <div class="no-data" v-if="filteredStudents.length === 0">
            <van-empty description="暂无学生数据" />
          </div>
        </div>
      </div>
      <div class="dialog-footer">
        <button class="btn btn-cancel" @click="handleClose">取消</button>
        <button class="btn btn-confirm" @click="handleConfirm" :disabled="selectedStudents.length === 0">
          确定选择 ({{ selectedStudents.length }})
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { Search, Checkbox, CheckboxGroup, Empty } from 'vant';

export default {
  name: 'TemporaryFollowDialog',
  components: {
    [Search.name]: Search,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Empty.name]: Empty,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    courseParams: {
      type: Object,
      default: () => ({
        classId: '',
        courseId: '',
        courseStartime: '',
        counrseEndtime: '',
        teacherNumber: ''
      })
    }
  },
  data() {
    return {
      searchKeyword: '',
      selectedStudents: [],
      allStudents: [],
      loading: false
    }
  },
  computed: {
    filteredStudents() {
      if (!this.searchKeyword.trim()) {
        return this.allStudents;
      }
      const keyword = this.searchKeyword.toLowerCase();
      return this.allStudents.filter(student =>
        student.studentName.toLowerCase().includes(keyword)
      );
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.searchKeyword = '';
        this.selectedStudents = [];
        this.loadAvailableStudents();
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },

    handleSearch() {
      // 搜索逻辑已在 computed 中处理
    },

    handleClearSearch() {
      this.searchKeyword = '';
    },

    async loadAvailableStudents() {
      try {
        this.loading = true;
        // 调用API获取可跟班的学生列表
        const params = {
          classId: this.courseParams.classId,
          courseId: this.courseParams.courseId,
          courseStartime: this.courseParams.courseStartime,
          counrseEndtime: this.courseParams.counrseEndtime,
          teacherNumber: this.courseParams.teacherNumber
        };

        const response = await this.$http.getAvailableFollowStudents(params);
        this.allStudents = response.data.result || [];

      } catch (error) {
        console.error('加载学生列表失败:', error);
        this.$toast('加载学生列表失败');
      } finally {
        this.loading = false;
      }
    },

    handleConfirm() {
      if (this.selectedStudents.length === 0) {
        this.$toast('请至少选择一名学生');
        return;
      }

      const selectedStudentDetails = this.allStudents.filter(student =>
        this.selectedStudents.includes(student.id)
      );

      const followData = {
        selectedStudents: selectedStudentDetails,
        courseParams: this.courseParams
      };

      this.$emit('confirm', followData);
      this.handleClose();
    }
  }
}
</script>

<style lang="scss" scoped>
.mobile-temporary-follow-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;

  .dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  .dialog-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(0);
    animation: slideUp 0.3s ease;
  }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
  }

  .dialog-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .close-btn {
    font-size: 24px;
    color: #999;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dialog-body {
    padding: 0;
  }

  .search-section {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
  }

  .student-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 0 20px;
  }

  .student-item {
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .student-info {
      margin-left: 12px;
    }

    .student-name {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
    }

    .student-details {
      display: flex;
      gap: 16px;
      font-size: 14px;
      color: #666;
    }

    .student-age,
    .student-classes {
      font-size: 13px;
      color: #999;
    }
  }

  .no-data {
    padding: 40px 0;
    text-align: center;
  }

  .dialog-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
  }

  .btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }

  .btn-cancel {
    background: #f5f5f5;
    color: #666;
  }

  .btn-confirm {
    background: #1989fa;
    color: white;
  }

  .btn-confirm:disabled {
    background: #c8c9cc;
    cursor: not-allowed;
  }
}
</style>
